<template>
<div class="container box-query">
    <div class="title-pic">
        <img :src="QueryPIC1" alt />
    </div>
    <!-- 验证码查询-->
    <el-form :model="loginForm" :rules="rules" status-icon ref="loginForm" class="demo-ruleForm">
        <el-form-item prop="password">
            <div class="el-input fa-lock fa">
                <span class="text-xin xin1">查询码</span>
                <input type="login" v-model="loginForm.password" @keyup="enterSubmit" class="el-input__inner" placeholder="请输入查询码" />
            </div>
        </el-form-item>
        <el-form-item prop="sidentify" class="yanzhengma-box">
            <div class="validCode">
                <span class="text-xin">图形验证码</span>
                <input v-model="loginForm.sidentify" @keyup="enterSubmit" class="el-input__inner inpurt-2" placeholder="请输入图形验证码" />
            </div>
            <div class="code-img" @click="getPicQuery">
                <!--
          <s-identify :identifyCode="identifyCode"></s-identify>-->
                <img :src="pic" alt />
            </div>
            <div class="box">
                <div class="right">
                    <el-tooltip class="item" effect="light" content="看不清请点击图片刷新（区分大小写）" placement="right">
                        <el-button>?</el-button>
                    </el-tooltip>
                </div>
            </div>
        </el-form-item>
        <!--<div class="text-tishi">看不清请点击图片刷新（区分大小写）</div>-->
        <el-form-item>
            <el-button class="submit-login" v-on:click="ValidForm('loginForm')" type="primary" style v-on:keyup.enter="ValidForm">确认查询</el-button>
        </el-form-item>
    </el-form>
</div>
</template>

<script>
import SIdentify from "./sidentify"; //**引入验证码组件**
export default {
    components: {
        SIdentify,
    },
    data() {
        var login = (rule, value, callback) => {
            // var regUserName = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;
            // if (value === "") {
            //   callback(new Error("请输入邮箱"));
            // } else if (!regUserName.test(value)) {
            //   callback(new Error("邮箱格式错误，请重新输入"));
            // } else {
            //   callback();
            // }
        };
        // var password = (rule, value, callback) => {
        //   var regUserName = /^{6}$/;
        //   if (value === "") {
        //     callback(new Error("请输入查询码"));
        //   } else if (!regUserName.test(value)) {
        //     callback(new Error("查询码须为六位"));
        //   } else {
        //     callback();
        //   }
        // };
        return {
            pic: "",
            QueryPIC1: require("@/assets/image/query-1.png"),
            //弹出框是否显示(登录)
            dialogVisible: true,
            loginForm: {
                password: "",
                sidentify: ""
            },
            rules: {
                password: [{
                        required: true,
                        message: "请输入查询码",
                        trigger: "blur"
                    },
                    {
                        min: 6,
                        max: 6,
                        message: "请输入六位查询码",
                        trigger: "blur"
                    },
                ],
                sidentify: [{
                        required: true,
                        message: "请输入验证码",
                        trigger: "blur"
                    },
                    {
                        min: 4,
                        max: 4,
                        message: "请输入四位验证码",
                        trigger: "blur"
                    },
                ],
            },
        };
    },
    created() {
        let g = this;
        document.onkeydown = function (e) {
            let key = window.event.keyCode;
            if (key == 13) {
                g.ValidForm("loginForm");
            }
        };
        this.getPicQuery();
    },
    //进行数据交互的方法
    methods: {
        //获取图形验证码
        getPicQuery() {
            this.Api.getPicQuery().then((res) => {
                const _this = this;
                var buf = new Uint8Array(res);
                var reader = new FileReader();
                reader.readAsText(new Blob([buf]), "utf-8");
                reader.onload = function () {
                    if (typeof reader.result == "string") {
                        if (reader.result.indexOf("code") > -1) {
                            let _res = JSON.parse(reader.result);
                            if (_res.code) {
                                _this.pic = "";
                                if (!_this.loginFalse) {
                                    _this.loginFalse = true;
                                }
                                _this.loginFalseMessage = _res.msg;
                            }
                        } else {
                            _this.pic =
                                "data:image/png;base64," +
                                btoa(
                                    buf.reduce(
                                        (data, byte) => data + String.fromCharCode(byte),
                                        ""
                                    )
                                );
                        }
                    }
                };
            });
        },
        //绑定回车事件
        enterSubmit(ev) {
            var keyCode = ev.keyCode || ev.which;
            if (keyCode == 13) {
                this.ValidForm();
            }
        },
        ValidForm(loginType) {
            this.loginForm.password = this.loginForm.password.replace(/[, ]/g, '')
            this.$refs["loginForm"].validate((valid) => {
                if (valid) {
                    this.Api.getQueryDetail({
                        captcha: this.loginForm.sidentify,
                        code: this.loginForm.password,
                    }).then((res) => {
                        console.log(res, "查询详情");
                        if (res.code === "0") {
                            if (res.data == null) {
                                // console.log(11111);
                                // sessionStorage.setItem("captchadetail", res.data);
                                this.$message.error("查询码有误，请确认");
                            } else {
                                let str = JSON.stringify(res.data);
                                // console.log(str,"1111")
                                sessionStorage.setItem("captchadetail", str);
                                this.$router.push({
                                    name: "Result"
                                });
                            }

                            // sessionStorage.setItem("captcha", this.loginForm.sidentify);
                            // sessionStorage.setItem("code", this.loginForm.password);
                        } else if (res.code === "405") {

                            this.$message.warning("图形验证码已失效，请点击图形验证码重新获取");
                        } else {
                            this.$message.error("查询失败");
                        }
                    });
                }
            });
            // console.log(this.identifyCode)
            // console.log(this.loginForm.password)
            // if(this.identifyCode==this.loginForm.sidentify){
            //   this.$router.push({name:"Result"});
            // } loginForm: { password: "", sidentify: "" },
            // console.log(1111);
        },
    },
};
</script>

<style lang="less" scoped>
.container {
    padding: 54px 40px;
}

.demo-ruleForm {
    width: 579px;
    margin: 0 auto;
    margin-top: 80px;
}

/*查询码框 */
.el-input__inner {
    width: 420px;
    height: 38px;
    display: inline-block;
}

.inpurt-2 {
    width: 325px;
}

/*查询码输入框和图片的盒子 */
.yanzhengma-box {
    position: relative;
    margin-bottom: 0px;
}

.s-canvas {
    width: 84px;
    height: 38px;
}

/*文本 */
.text-xin {
    display: inline-block;
    margin-right: 33px;
    width: 96px;
    text-align: right;
}

/*星号 */
.text-xin:before {
    content: "* ";
    color: red;
}

.text-tishi {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
    line-height: 20px;
    margin-left: 129px;
}

.submit-login {
    width: 234px;
    height: 52px;
    background: rgba(20, 123, 253, 1);
    box-shadow: 0px 4px 12px 0px rgba(20, 123, 253, 0.6);
    border-radius: 5px;
    font-size: 20px;
    margin-left: 129px;
    margin-top: 38px;
}

/deep/.el-form-item__error {
    left: 130px;
}

.code-img {
    position: absolute;
    right: 29px;
    bottom: -13px;
    display: inline-block;

    img {
        width: 84px;
        height: 38px;
        border-radius: 4px;
    }
}

/**提示文字 */
/deep/.el-button--default {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    padding: 0;
    margin: 0;
    color: rgba(153, 153, 153, 1);
    border: 1px solid rgba(153, 153, 153, 1);
    position: absolute;
    right: 0;
    bottom: 12px;
}
</style>
